/*
 * @Author: Salaing
 * @Date: 2024-08-28 23:07:36
 * @LastEditors: Salaing
 * @LastEditTime: 2024-09-05 00:49:09
 * @Description: file content
 */
import React, { useState } from 'react';
import { Modal, Table } from 'antd';
import { useSelector } from 'umi';

const { Column } = Table;

const AddChildModal = ({
  showChildModal,
  setShowChildModal,
  pushOrUpdateList,
  existsList = [],
}) => {
  const [childList, setChildList] = useState([]);
  const { departmentDetail } = useSelector((state) => state.department);

  const departmentList = useSelector((state) => {
    return state.department.departmentList.filter((item) => {
      return (
        !item.parentLists.length &&
        departmentDetail?._id !== item._id &&
        // 已存在的不添加
        !existsList?.map((item) => item._id).includes(item._id)
      );
    });
  });

  // 清空 关闭弹窗操作
  const clearSelect = () => {
    setShowChildModal(false);
  };

  //   新增子部门操作
  const addChildList = () => {
    if (departmentDetail !== null) {
      pushOrUpdateList({ list: childList, type: 'update' });
    } else {
      pushOrUpdateList({ list: childList.concat(existsList), type: 'add' });
    }
    setShowChildModal(false);
  };

  return (
    <Modal
      title="添加子部门"
      open={showChildModal}
      onCancel={clearSelect}
      onOk={addChildList}
      destroyOnClose
      ariaHideApp={false}
    >
      <Table
        dataSource={departmentList}
        rowSelection={{
          onChange: (ids, record) => {
            setChildList(record);
          },
        }}
        rowKey={(record) => record._id}
        // expandIconColumnIndex={-1}
        expandable={{
          expandIconAsCell: false,
          expandedRowKeys: [],
          expandIconColumnIndex: -1,
        }}
        pagination={false}
      >
        <Column title="部门名称" dataIndex={'departmentName'}></Column>
      </Table>
    </Modal>
  );
};

export default AddChildModal;
